<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.组件的嵌套</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<!-- 严重注意：在脱离脚手架的前提下，容器中去编写组件标签时，一定不要自闭和 -->
			<Student></Student>
			<hr>
			<School></School>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//定义一个Hello组件
			let Hello = Vue.extend({
				template:`
					<div>
						<h3>欢迎学习Vue</h3>	
						<h3>好好学，一点也不难</h3>
					</div>
				`,
			})

			//全局注册Hello组件（若某个组件很多的地方都要用，那就可以全局注册）
			Vue.component('Hello',Hello)

			//定义一个Student组件
			let Student = Vue.extend({
				//配置组件结构
				template:`
					<div>
						<!-- 严重注意：若在模板里，使用自闭和的组件标签，是没问题的 -->
						<Hello/>
						<Hello/>
						<Hello/>
						<h2>学生姓名：{{name}}</h2>
						<h2>学生年龄：{{age}}</h2>
						<button @click="incrementAge">年龄+1</button>
					</div>
				`,
				//局部注册组件
				// components:{Hello},
				//配置组件数据
				data(){
					return {
						name:'张三',
						age:18
					}
				},
				//配置方法
				methods:{
					incrementAge(){
						this.age += 1
					}
				},
			})

			//定义一个School组件
			let School = Vue.extend({
				//配置组件结构
				template:`
					<div>
						<Hello></Hello>
						<h2>学校名称：{{name}}</h2>
						<h2>学校地址：{{address}}</h2>
						<button @click="changeName">更换学校名</button>
					</div>
				`,
				//局部注册组件
				// components:{Hello},
				//配置组件数据
				data(){
					return {
						name:'尚硅谷',
						address:'宏福科技园'
					}
				},
				//配置方法
				methods:{
					changeName(){
						this.name = 'atguigu'
					}
				},
			})

			//创建vm
			new Vue({
				el:'#demo',
				components:{Student,School}
			})
			
			
		</script>
	</body>
</html>